<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>E-Commerce</title>
	<link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.3.2.css">
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.3.2.js"></script>
	
	<script language="javascript" type="text/javascript" src="jquery.Rut.js"></script>





<script language="javascript" type="text/javascript">

//-----------------------------------------------------------------------------





$(document).ready(function(){

//-----------------------------------------------------------------------------

$.ajax({
            url: 'http://localhost:81/ecomerce/productos/listaproductos',
            type:'GET',
            dataType: 'jsonp',
            jsonpCallback:'TodosProductos'
        });



//_---------------------------------------------------------------------------------------------------------

$('#categoria').change(function() {

	var option = $('#select-categorias').val();
	if(option == "todos"){

		$.ajax({	
            url: 'http://localhost:81/ecomerce/productos/listaproductos',
            type:'GET',
            dataType: 'jsonp',
            jsonpCallback:'TodosProductos'
        });


	}
	
else {

$.ajax({

            url: 'http://localhost:81/ecomerce/productos/productos_categorias/' + option,
            type:'GET',
            dataType: 'jsonp',
            jsonpCallback:'llenarProductos'

        });

	}

});
//---------------------------------------------------------------------------------------------------------

$('#Producto').change(function() {

	var idPro = $('#').val();
	

		$.ajax({	
            url: 'http://localhost:81/ecomerce/productos/listaproductos/'+ idPro,
            type:'GET',
            dataType: 'jsonp',
            jsonpCallback:'ProductoID'
        });


});


//---------------------------------------------------------------------------------------------------------

$.ajax({
 			url: 'http://localhost:81/ecomerce/Categorias/listacategorias',
			Type:'GET',
            dataType: 'jsonp',
			jsonpCallback:'llenarlistbox'
 	});

//--------------------------------------------------------------------------------------------------------

	$('#rut').Rut({
on_error: function(){ alert('Rut incorrecto'); 
$("#rut").val("");
$("#rut").focus();
},
format_on: 'true'

});

});
//---------------------------------------------------------------------------



function validateForm()
{
var x=document.forms["formCarrito"]["cant"].value;
if ( x=="")
  {
  alert("Ingrese una cantidad");
  return false;
  }
}

//---------------------------------------------------------------------------------------------------------


/*function ProductoID(data) {
      
        var idPro = $("#").val();
           
                $.each(data, function(item2) {
                    listaproductos += '<article>';
                    listaproductos += '<p><a href="#Producto" data-rel="dialog"><h2>' + data[item2].Producto.producto + '</h2></p>';
                    var imagenes = data[item2].Imagene;
                    $.each(imagenes, function(item3) {
                        listaproductos += '<img src="/ecomerce/img/uploads/imagene/filename/' + imagenes[item3].filename + '" height="100px" width="100px">';
                        return false;
                    });
                    listaproductos += '</article>';

                });

                $('#Producto').html(listaproductos);     

    }
*/

-->
//---------------------------------------------------------------------------------------------------------
function llenarlistbox(data) {
        
                var listacat = '<select id="select-categorias"><option value="todos">Ver Todos</option>';
                $.each(data, function(item) {
                    var idCat = data[item].Categoria.id;
                    var cat = data[item].Categoria.categoria;
                    listacat += '<option value=' + idCat + '>' + cat + '</option>';
                });
                listacat += '</select>';
                $('#categoria').html(listacat);
          
    }



//------------------SESION----------------------------------------------------------

$.ajax({
		url: 'http://localhost:81/ecomerce//',
		type: 'POST',
		dataType: 'Jsonp',
		jsonpCallback: 'InicioSesion',
		data: ("#sesion").serialize(),
		
	});

//------------------------------------------------------------------------------------------------------------
	

function InicioSesion(data)
{
$(#enviar).click(function() {
	
	
	$(".pie").html(data);


});

}

//--------------------ADD-------------------------------------------------------------------------

$.ajax({
		url: 'http://localhost:81/ecomerce//',
		type: 'POST',
		dataType: 'Jsonp',
		jsonpCallback: 'AgregarCli',
		data: ("#agregar").serialize(),
		
	});

//------------------------------------------------------------------------------------------------------------
	

function AgregarCli(data)
{
$(#enviarAdd).click(function() {
	
	
	alert("oli")


});

}








//------------------------------------------------------------------------------------------------------------
function llenarProductos(data) {
        var listaproductos = '';
        var idCat = $("#select-categorias").val();
           
                $.each(data, function(item2) {
                    listaproductos += '<article>';
                    listaproductos += '<p><a href="#Producto" data-rel="dialog"><h2>' + data[item2].Producto.producto + '</h2></p>';
                    var imagenes = data[item2].Imagene;
                    $.each(imagenes, function(item3) {
                        listaproductos += '<img src="/ecomerce/img/uploads/imagene/filename/' + imagenes[item3].filename + '" height="100px" width="100px">';
                        return false;
                    });
                    listaproductos += '</article>';

                });

                $('#tablaProductos').html(listaproductos);     

    }




//-----------------------------------------------------------------------------------------------------------   

function TodosProductos(data) {
        var listaproductos = '';
        
           
                $.each(data, function(item2) {

                    listaproductos += '<article>';
                    listaproductos += '<p><a href="#Producto" data-rel="dialog"><h2>' + data[item2].Producto.producto + '</h2></a></p>';
                    var imagenes = data[item2].Imagene;
                    $.each(imagenes, function(item3) {
                        listaproductos += '<img src="/ecomerce/img/uploads/imagene/filename/' + imagenes[item3].filename + '" height="100px" width="100px">';
                        return false;
                    });
                    listaproductos += '</article>';

                });

                
                $('#tablaProductos').html(listaproductos);
            
    }


//-----------------------------------------------------------------------------------------------------------   


</script>




	<style>
		.headerButton   {
  						 	 float: right;
   						}
	</style>



	</head>
	<body>

			<!--********************Index*************-->
		<!-- /page -->
		<section id="Index" data-role="page" data-title="Index">

			<!-- /header -->
			<header data-role="header" data-position="fixed">
				<h1>Productos</h1>
				<a href="#Login"  data-rel="dialog">Login</a>
				<a data-role="button" href="#Carrito" class="ui-btn-right" data-theme="b">Carrito</a>
			</header>
			<!-- /header -->

			<!-- /content -->
				<article data-role="content" >
					
				<label for="selectmenu1">
                Categorias
            </label>

           			 <div id="categoria">
            	
            		</div>
			<br>

				<!--Productos -->
					<div id="tablaProductos">

					</div>
				<!--/productos -->

				

				</article>
			<!-- /content -->

			<!-- /footer -->
			<footer data-role="footer" data-position="fixed" class="pie">
				<h1></h1>
			</footer>
			<!-- /footer -->

		</section>
		<!-- /page -->

			<!--********************Login*************-->


		<!-- /page -->
		<section id="Login" data-role="page" data-title="Login">
			
			<!-- /header -->
			<header data-role="header" data-position="fixed">
				<h1>Inicio Sesion</h1>
			</header>
			<!-- /header -->

			<!-- /content -->
				<article data-role="content">
					<p>
						<form method="post" id="sesion">
							<label for="usuario">Correo Electronico:</label>
							<input type="email" name="email" id="usuario" required placeholder="Correo Electronico">

							<label for="contrasenia">contraseña:</label>
							<input type="password" name="pass" id="contrasenia" required placeholder="Contraseña">

							<div class="ui-grid-a">
								<div class="ui-block-a"><input type="reset" value="Limpiar" ></div>
								<div class="ui-block-b"><input type="submit" value="Iniciar Sesion" id="enviar"></div>
							</div>

							
							

							<a href="#crear_cuenta">Crear Cuenta</a>

						</form>

					</p>
				</article>
			<!-- /content -->			

		</section>
		<!-- /page -->	


		<!--********************Crear Cuenta*************-->
		<!-- /page -->
		<section id="crear_cuenta" data-role="page" data-title="Crear Cuenta">

			<!-- /header -->
			<header data-role="header" data-position="fixed">
				<h1>Crear Cuenta</h1>
				<a href="#Index" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Home</a>
			</header>
			<!-- /header -->

			<!-- /content -->
				<article data-role="content">
					<p>
						

						<form name="form1" onsubmit="javascript:return Rut(document.form1.rut.value)" id="agregar">
		

							<input name="rut" id="rut" type="text" required placeholder="Rut Ejemplo: 123456789(*) "/>
						
						
							<input type="text" name="name" id="usuario" required placeholder="Nombre (*)">

						
							<input type="text" name="name" id="usuario" required placeholder="Apellido Paterno (*)">

						
							<input type="text" name="name" id="usuario" placeholder="Apellido Materno">

						
							<input type="email" name="name" id="usuario" required placeholder="Correo Electronico (*)">

						
							<input type="password" name="pass" id="contrasenia" required placeholder="Contraseña (*)">		
	
						
							<input type="password" name="pass" id="contrasenia" required placeholder="Contraseña (*)">
						
							<div class="ui-grid-a">
								<div class="ui-block-a"><input type="reset" value="Limpiar" ></div>
								<div class="ui-block-b"><input type="submit" value="Crear" id="enviarAdd"></div>
							</div>
					
						
						

						</form>

					</p>
				</article>
			<!-- /content -->

			<!-- /footer -->
			<footer data-role="footer" data-position="fixed" class="pie">
				<h1></h1>
			</footer>
			<!-- /footer -->

		</section>
		<!-- /page -->



			<!--********************Carrito*************-->
		<!-- /page -->
		<section id="Carrito" data-role="page" data-title="Carrito">

			<!-- /header -->
			<header data-role="header" data-position="fixed">
				<h1>Carrito</h1>
				<a href="#Login"  data-rel="dialog">Login</a>
				<a data-role="button" href="#Index" class="ui-btn-right" data-theme="b">
            Productos
        </a>
			</header>
			<!-- /header -->

			<!-- /content -->
				<article data-role="content">
					
				<div class="ui-grid-a">
					<div class="ui-block-a">
										
					</div>
					<div class="ui-block-b">
							
					</div>
				</div>
					
					<form name"formCarrito">
					<div class="ui-grid-b" >

						<div class="ui-block-a">
							<center><img src="mouse-genius.jpg" width="35%" heigth="35%"></center>
						</div>

						<div class="ui-block-b">
							<input type="number" value="1" min="1"  name="cant" required>
						</div>

						<div class="ui-block-c">
							<input type="text" value="" placeholder="total">
						</div>

					</div>
					
					<div class="ui-grid-a">

						<div class="ui-block-a"><a href="#Index" data-role="button" data-inline="true" class="headerButton">Cancel</a></div>

						<div class="ui-block-b"><input type="submit" value="Comprar"  data-inline="true"></div>

					</div>

					</form>
				

				</article>
			<!-- /content -->

			<!-- /footer -->
			<footer data-role="footer" data-position="fixed" class="pie">
				<p></p>
			</footer>
			<!-- /footer -->

		</section>
		<!-- /page -->





			<!--********************PRODUCTO*************-->
		<!-- /page -->
		<section id="Producto" data-role="page" data-title="Producto">

			<!-- /header -->
			<header data-role="header" data-position="fixed">
				<h1>Producto</h1>
				
			</header>
			<!-- /header -->

			<!-- /content -->
				<article data-role="content">
					
				<div id="dato">
					
				</div>


				
					
				</article>
			<!-- /content -->
			
			<footer data-role="footer" data-position="fixed" >
				<center><a href="#" data-role="button" data-icon="check" data-theme="b">Agregar al Carrito</a></center>
			</footer>
			

		</section>
		<!-- /page -->


	</body>
</html>